<template>
    <view class="m-home-layout">
        <template v-for="layout in layouts">
            <m-swiper v-if="layout.type == 1" :items="layout.swiper"></m-swiper>
            <template v-if="layout.type == 7">
                <MSimpleCard :is-padding="false">
                    <m-image-link
                        :image-url="layout.imageLink?.imageUrl"
                        :height="`${layout.imageLink?.height}rpx`"
                    ></m-image-link>
                </MSimpleCard>
            </template>
            <template v-if="layout.type == 9">
                <MSimpleCard>
                    <uni-grid :column="5" :show-border="false" :square="false">
                        <uni-grid-item v-for="(item, index) in layout.quickAccess" :index="index" :key="index">
                            <view class="grid-item-box">
                                <image class="image" :src="item.imageUrl" mode="aspectFill" />
                                <text class="text">{{ item.title }}</text>
                            </view>
                        </uni-grid-item>
                    </uni-grid>
                </MSimpleCard>
            </template>
            <template v-if="layout.type == 10">
                <MMiaoSha :miaosha="layout.miaosha!"></MMiaoSha>
            </template>
            <template v-if="layout.type == 11"></template>
            <template v-if="layout.type == 12"></template>
        </template>
    </view>
</template>

<script setup lang="ts">
import { ref, shallowRef, watchEffect } from 'vue'
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { getHomeData } from '@/api/home'
import MSwiper from '@/components/common/MSwiper.vue'
import MImageLink from '@/components/common/MImageLink.vue'
import MSimpleCard from '@/components/common/MSimpleCard.vue'
import MMiaoSha from '@/components/business/MMiaoSha.vue'
const props = defineProps({
    topic: Number
})
const layouts = shallowRef<Array<Layout>>()
watchEffect(() => {
    getHomeData(props.topic).then((v) => {
        layouts.value = v.data || []
    })
})
</script>

<style lang="scss" scoped>
.image {
    width: 100rpx;
    height: 100rpx;
}

.text {
    font-size: 28rpx;
    margin-top: 10rpx;
}
.grid-item-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;
}
.m-layout-image-link {
    padding: $uni-spacing-row-sm;
}
.m-home-layout {
    overflow: hidden;
}
</style>
